<template>
  <view class="getSuccess">
    <view class="getBox">
      <image
        :src="asyncImgs.coupon.coupon_bg"
        class="bg"
        @click="toList"
      ></image>
      <view class="cardBox">
        <view class="top">
          <view class="name">
            <text>{{ couponInfo.name }}</text>
            <text>{{ couponInfo | dateText }}</text>
          </view>
          <view class="price">
            <view class="money" v-if="couponInfo.discount_type == 2">
              <text>￥</text>
              <text>{{ couponInfo.sub_price }}</text>
            </view>
            <view class="discount" v-if="couponInfo.discount_type == 1"
              >{{ couponInfo.discount }}折</view
            >
            <text class="title">满{{ couponInfo.min_price }}可用</text>
          </view>
        </view>
        <view class="bottom">
          <view class="detailInfo">{{ couponInfo.content }}</view>
        </view>
      </view>
      <image
        @click="$emit('close')"
        :src="asyncImgs.coupon.icon_close3"
        class="close"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    couponInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  filters: {
    dateText(val) {
      if (!val) return;
      if (val.expire_type == 1) {
        if (val.expire_day > 0) {
          return `领取后${val.expire_day}天有效`;
        } else {
          return `领取后永久天有效`;
        }
      } else if (val.expire_type == 2) {
        return `${val.begintime}~${val.endtime}`;
      } else {
        return "";
      }
    },
  },
  methods: {
    toList() {
      this.$emit("close");
      this.$utils.toUrl("/pages/home/home", "switchtab");
    },
  },
};
</script>

<style lang="scss" scoped>
.getSuccess {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 999;
  padding-top: 140rpx;
  .getBox {
    position: relative;
    padding: 0 60rpx;
    .bg {
      width: 630rpx;
      height: 666rpx;
    }
    .close {
      position: absolute;
      bottom: -120rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 80rpx;
      height: 80rpx;
    }
    .cardBox {
      width: 570rpx;
      position: absolute;
      top: 216rpx;
      left: 50%;
      transform: translateX(-50%);
      .top {
        position: relative;
        border-radius: 20rpx 20rpx 0 0;
        border-bottom: 1px dashed #ededed;
        background-color: #fff;
        padding: 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        ::before {
          content: "";
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #f8622f;
          bottom: -10rpx;
          left: -10rpx;
        }
        ::after {
          content: "";
          position: absolute;
          width: 20rpx;
          height: 20rpx;
          border-radius: 50%;
          background-color: #f23b27;
          bottom: -10rpx;
          right: -10rpx;
        }
        .name {
          display: flex;
          flex-direction: column;
          text:nth-child(1) {
            font-size: 30rpx;
            color: #262626;
            font-weight: 600;
          }
          text:nth-child(2) {
            font-size: 22rpx;
            color: #8c8c8c;
            margin-top: 10rpx;
          }
        }
        .price {
          .money {
            display: flex;
            align-items: baseline;
            color: #f0250e;
            font-weight: 600;
            text:nth-child(1) {
              font-size: 28rpx;
            }
            text:nth-child(2) {
              font-size: 56rpx;
            }
          }
          .discount {
            color: #f0250e;
            font-size: 44rpx;
          }
          .title {
            font-size: 22rpx;
            color: #8c8c8c;
          }
        }
      }
      .bottom {
        border-radius: 0 0 20rpx 20rpx;
        background-color: #fff;
        padding: 24rpx 28rpx;
        .detailInfo {
          font-size: 24rpx;
          color: #8c8c8c;
          padding-bottom: 10rpx;
        }
        .detail {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #8c8c8c;
        }
      }
    }
  }
}
</style>
